<template>
  <div>
    <el-drawer v-bind="$attrs">
      <div style="height:100%">
        <el-row style="height:100%;overflow:auto">
          <el-col :span="24" class="right-preview">
            <div class="action-bar" :style="{'text-align': 'left'}">
              <span class="bar-btn" @click="runCode">
                <i class="el-icon-refresh" />
                刷新
              </span>
              <span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
                <i class="el-icon-circle-close" />
                关闭
              </span>
            </div>
            <div class="drawmain">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item v-for="(item, index) in formData" :key="index" :label="item.__config__.label">
                  <component :current="item" :is="item.__config__.tag"></component>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini">保  存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
const model = require.context('./components', true, /\.vue$/)
let components = {}
model.keys().forEach(item => {
  let comp = model(item)
  components[comp.default.name] = comp.default
})
export default {
  components: components,
  props: ['formData', 'generateConf'],
  data() {
    return {
      isIframeLoaded: false,
      form: {}
    }
  },
  computed: {
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    runCode() {
      console.log(this.formData)
      console.log(this.generateConf)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.tab-editor {
  position: absolute;
  top: 33px;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 14px;
}
.left-editor {
  position: relative;
  height: 100%;
  background: #1e1e1e;
  overflow: hidden;
}
.setting{
  position: absolute;
  right: 15px;
  top: 3px;
  color: #a9f122;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}
.right-preview {
  height: 100%;
  .result-wrapper {
    height: calc(100vh - 33px);
    width: 100%;
    overflow: auto;
    padding: 12px;
    box-sizing: border-box;
  }
}
@include action-bar;
::v-deep .el-drawer__header {
  display: none;
}
.drawmain {
  padding: 20px 120px;
}
</style>
